import React, { Component } from 'react';
import { Button, message, Tag } from 'antd';
import { getUrlParams } from 'yl-util';
import ImgViewer from './ImgViewer';
import { api } from '../../constants';
import { fetch } from '../../utils';
import img11 from '../../assets/imgs/c260f7ably1g50szbhkgpj22rq3vlnpg.jpg';
import img12 from '../../assets/imgs/c260f7ably1g50szcsfr9j22ww42uhdu.jpg';
import img13 from '../../assets/imgs/c260f7ably1g50szf62r4j23gg4u8x6s.jpg';
import img21 from '../../assets/imgs/c260f7ably1g5eky4yn6tj23gg4u8npf.jpg';
import img22 from '../../assets/imgs/c260f7ably1g5eky81oosj23gg4u8kjm.jpg';
import img23 from '../../assets/imgs/c260f7ably1g5eky0g0hhj22ku3lyqv8.jpg';
import img31 from '../../assets/imgs/c260f7ably1g55gcyuu6dj22cn3ib1kz.jpg';
import img32 from '../../assets/imgs/c260f7abgy1g4w4gfxt8oj23gg4u81kz.jpg';
import img33 from '../../assets/imgs/c260f7abgy1g4xaxkhaquj23bs4np4qq.jpg';
import img34 from '../../assets/imgs/c260f7abgy1g4w4cm4cd8j23gg4u8x6q.jpg';
import './style.scss';

let openId = '';
const urlParams = getUrlParams(window.location.href.split('?')[1]);
if (urlParams && urlParams.id) {
  openId = window.btoa(window.btoa(`${urlParams.id}yqcmxssLcJL1l8jnlC`));
}

const statusMap = {
  0: <Tag>未获得</Tag>,
  1: <Tag color="blue">可佩戴</Tag>,
  2: <Tag color="green">已佩戴</Tag>,
};

export default class Badge extends Component {
  state = {
    badgeShowed: false,
    badgeList: [],
  };

  componentDidMount() {
    this.getBadgeList();
  }

  async getBadgeList() {
    const params = {
      openId,
    };
    let response = await fetch(`${api.badgenew}`, {
      method: 'POST',
      body: params,
    });
    response = response.data || {};
    if (response['1']) {
      const badgeList = Object.values(response).reduce((all, item) => (Array.isArray(item) ? all.concat(item) : all.concat(Object.values(item))), []);
      console.log('badgeList: ', badgeList);
      this.setState({ badgeList });
    }
  }

  showBadge = () => {
    this.setState({ badgeShowed: true });
  }

  // 佩戴徽章
  async badge(id) {
    const params = {
      openId,
      id,
    };
    const response = await fetch(`${api.getbadge}`, {
      method: 'POST',
      body: params,
    });
    if (response.msgCode === 'S0000') {
      this.getBadgeList();
      message.success(`${response.data.msg}`);
    } else {
      message.error(response.message || '接口返回异常');
    }
  }

  render() {
    const { badgeShowed, badgeList } = this.state;
    if (badgeShowed) {
      return (
        [
          <div>
            <Button onClick={() => { this.setState({ badgeShowed: false }); }}>返回看照片</Button>
          </div>,
          <div className="badge">
            {
              badgeList.map(item => (
                <div className="badge-item">
                  <span className="name">{item.name}: </span>
                  {statusMap[item.status]}
                  <Button size="small" onClick={this.badge.bind(this, item.id)}>佩戴</Button>
                </div>
              ))
            }
          </div>,
        ]
      );
    }
    return (
      <div className="xixi">
        <ImgViewer src={img11} />
        <ImgViewer src={img12} />
        <ImgViewer src={img13} />
        <ImgViewer src={img21} />
        <ImgViewer src={img22} />
        <ImgViewer src={img23} />
        <ImgViewer src={img31} />
        <ImgViewer src={img32} ghost onChange={this.showBadge} />
        <ImgViewer src={img33} />
        <ImgViewer src={img34} />
      </div>
    );
  }
}
